<template>
  <div class="home_page">

    <h2>{{ title }}</h2>

    <div class="article_list">
      <div v-for="article in articleList" class="article_card" :key="article.id" >
        <div @click="handleArticle(article.id)">
          <div class="thumbnail">
            <img :src="article.picture"/>
          </div>
          <div class="info">
            <div class="title">{{ article.title }}</div>
            <div class="meta">
              <span>👁 {{ article.views }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <h2>{{ articleList.length==0? '未找到数据' : '' }}</h2>

  </div>
</template>
    
<script setup>
import { emitter } from '@/router/eventBus';
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import hahaPng from '@/assets/1234.jpg'
import server from '@/api/server'
import { onUnmounted } from 'vue';
  
const router = useRouter();

const title = ref("根据文章标题搜索：");

const articleList = ref([{
  id: 1,
  userId: 1,
  picture: hahaPng,
  title: 'hahahaha',
  views: 999
}])

const handleArticle = (articleId)=>{
  server.currentPageId = articleId;
  router.push("/detail");
}



onMounted(()=>{
  displayData()
  emitter.on('user_searched', displayData);
})

onUnmounted(()=>{
  emitter.off('user_searched', displayData)
})

function displayData() {
  title.value = server.searchMsg
  articleList.value = server.searchData.data
}
</script>
  
  
  
  <style scoped>
  .home_page {
    width: 1000px;
    margin: 0 auto;padding: 25px;
    background: #f4f4f4;
  }
  
  .tagbox {
    display: flex;flex-flow:row wrap;
  }
  
  .tagbox button{
    display: flex;flex-flow:row wrap;
    justify-content: center;
    width: 70px;height: 40px;
  
    align-items: center;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    transition: background 0.2s;
  }
  
  .tagbox button:hover{
    background: #e5e7eb;
  }
  
  
  
  
  
  
  /* 文章列表 */
  .article_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 20px 0vw 120px;
  }
  /* 文章卡片 */
  .article_card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 6px rgba(0,0,0,0.05);
    transition: transform 0.2s;
  }
  
  .article_card:hover {
    transform: translateY(-4px);
  }
  
  /* 缩略图 */
  .thumbnail {
    height: 180px;
    overflow: hidden;
    position: relative;
  }
  
  .thumbnail img {
    height: 100%;width: 100%;
    object-fit: cover;
  }
  
  /* 文章信息 */
  .info {
    padding: 8px 10px;
  }
  
  .info .title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .info .meta {
    font-size: 12px;
    color: #999;
  }
  </style>